jQuery(document).ready(function(){
	$ = jQuery;
	$('select').change(function(){
		// Get the name
		var data = $(this).attr('class').split(' ');
		if(data.length == 2)
		{
			var name = data[0];
			var type = data[1];
			var value = 1 + parseInt($(this).val());
			var exp = new RegExp("(.*)("+type+"[0-9]+)(.*)")
			var imageClass = $('.image.octoms-category.'+name).
				attr('class').
				replace(exp, "$1"+type+value+"$3");
			$('.image.octoms-category.'+name).removeClass().addClass(imageClass);
		}
	});
	// Bottom click
	$('.control > div').click(function(e){
		var move = function(el,p){
			var cls = $(el).siblings('.image').attr('class').replace(/image|\s|octoms-category|l[0-9]+|c[0-9]+/ig, "")
			if(p=='up')
			{
				select = $('select.'+cls+'.l');
				if(select.val()>0) select.val(parseInt(select.val())-1).change();
			}
			if(p=='down')
			{
				select = $('select.'+cls+'.l');
				select.val(parseInt(select.val())+1).change();
			}
			if(p=='left')
			{
				select = $('select.'+cls+'.c');
				if(select.val()>0) select.val(parseInt(select.val())-1).change();
			}
			if(p=='right')
			{
				select = $('select.'+cls+'.c');
				select.val(parseInt(select.val())+1).change();
			}
		};
		
		// Top
		if($(this).hasClass('top')){move(this,'up');}
		// Bottom
		if($(this).hasClass('bottom')){move(this,'down');}
		// Left
		if($(this).hasClass('left')){move(this,'left');}
		// Right
		if($(this).hasClass('right')){move(this,'right');}
		
	});
});